<!DOCTYPE html>
<html lang="ug" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ERP سىستېمىسى</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0EA5E9',
secondary: '#0284C7'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: 'UKIJ Ekran';
src: url('https://fonts.cdnfonts.com/css/ukij-ekran') format('woff2');
}
body {
font-family: 'UKIJ Ekran', sans-serif;
min-height: 1024px;
}
.sidebar-icon {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen mr-64">
<!-- Sidebar -->
<aside class="w-64 bg-gray-800 text-white fixed right-0 h-full">
<div class="p-4 font-['Pacifico']">
<span class="text-2xl">Logo</span>
</div>
<nav class="mt-4">
<a href="#" class="flex items-center justify-between px-4 py-3 bg-gray-900">
<span>مال كىرگۈزۈش</span>
<i class="fas fa-shopping-cart w-5"></i>
</a>
<a href="#" class="flex items-center justify-between px-4 py-3 hover:bg-gray-700">
<span>مال سېتېش</span>
<i class="fas fa-store w-5"></i>
</a>
<a href="#" class="flex items-center justify-between px-4 py-3 hover:bg-gray-700">
<span>ئامبار باشقۇرۇش</span>
<i class="fas fa-warehouse w-5"></i>
</a>
<a href="#" class="flex items-center justify-between px-4 py-3 hover:bg-gray-700">
<span>مالىيە باشقۇرۇش</span>
<i class="fas fa-money-bill w-5"></i>
</a>
<a href="#" class="flex items-center justify-between px-4 py-3 hover:bg-gray-700">
<span>دوكلات ۋە سىتاستىكا</span>
<i class="fas fa-chart-bar w-5"></i>
</a>
<a href="#" class="flex items-center justify-between px-4 py-3 hover:bg-gray-700">
<span>تەڭشەكلەر</span>
<i class="fas fa-cog w-5"></i>
</a>
<a href="#" class="flex items-center justify-between px-4 py-3 hover:bg-gray-700">
<span>ياردەم ۋە باشقىلار </span>
<i class="fas fa-info-circle w-5"></i>
</a>
<a href="#" class="flex items-center justify-between px-4 py-3 hover:bg-gray-700">
    <span>دېتال ھەققىدە</span>
    <i class="fas fa-info-circle w-5"></i>
</nav>
</aside>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Top Bar -->
<div class="bg-white shadow-sm">
<div class="flex items-center justify-between px-8 py-4">
<div class="flex items-center space-x-4">
<button class="p-2 hover:bg-gray-100 rounded-button">
<i class="fas fa-user text-gray-600"></i>
</button>
<button class="p-2 hover:bg-gray-100 rounded-button">
<i class="fas fa-bell text-gray-600"></i>
</button>
<button class="p-2 hover:bg-gray-100 rounded-button">
<i class="fas fa-paint-brush text-gray-600"></i>
</button>
</div>
<div class="flex items-center">
<div class="relative">
<input type="text" class="w-96 pl-4 pr-10 py-2 border rounded-button focus:outline-none focus:border-primary" placeholder="ئىزدەش...">
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
</div>
</div>
</div>
</div>
<!-- Stats Cards -->
<div class="p-8">
<div class="grid grid-cols-5 gap-6">
<!-- Card 1 -->
<div class="bg-primary text-white rounded-lg p-4">
<h3 class="text-lg font-medium">كىرىم-چىقىم</h3>
<div class="mt-2 flex justify-between items-end">
<span class="text-2xl font-bold">¥ 45,678</span>
<span class="text-sm">+12.5%</span>
</div>
</div>
<!-- Card 2 -->
<div class="bg-yellow-500 text-white rounded-lg p-4">
<h3 class="text-lg font-medium">سودا سانى</h3>
<div class="mt-2 flex justify-between items-end">
<span class="text-2xl font-bold">1,234</span>
<span class="text-sm">+8.3%</span>
</div>
</div>
<!-- Card 3 -->
<div class="bg-blue-500 text-white rounded-lg p-4">
<h3 class="text-lg font-medium">ئامبار مىقدارى</h3>
<div class="mt-2 flex justify-between items-end">
<span class="text-2xl font-bold">5,678</span>
<span class="text-sm">-2.1%</span>
</div>
</div>
<!-- Card 4 -->
<div class="bg-red-500 text-white rounded-lg p-4">
<h3 class="text-lg font-medium">كىرگۈزگەن مال</h3>
<div class="mt-2 flex justify-between items-end">
<span class="text-2xl font-bold">789</span>
<span class="text-sm">+5.7%</span>
</div>
</div>
<!-- Card 5 -->
<div class="bg-green-500 text-white rounded-lg p-4">
<h3 class="text-lg font-medium">نىسى تەپسىلاتى</h3>
<div class="mt-2 flex justify-between items-end">
<span class="text-2xl font-bold">234</span>
<span class="text-sm">+15.2%</span>
</div>
</div>
</div>
<!-- Quick Access -->
<div class="mt-8">
<div class="grid grid-cols-8 gap-4 bg-white p-4 rounded-lg shadow-sm">
<button class="flex flex-col items-center justify-center p-4 hover:bg-gray-50 rounded-lg">
<i class="fas fa-box text-primary text-xl mb-2"></i>
<span class="text-sm">مال كىرگۈزۈش</span>
</button>
<button class="flex flex-col items-center justify-center p-4 hover:bg-gray-50 rounded-lg">
<i class="fas fa-truck text-primary text-xl mb-2"></i>
<span class="text-sm">مال چىقىرىش</span>
</button>
<button class="flex flex-col items-center justify-center p-4 hover:bg-gray-50 rounded-lg">
<i class="fas fa-clipboard-check text-primary text-xl mb-2"></i>
<span class="text-sm">مال تاپشۇرۇش</span>
</button>
<button class="flex flex-col items-center justify-center p-4 hover:bg-gray-50 rounded-lg">
<i class="fas fa-search text-primary text-xl mb-2"></i>
<span class="text-sm">ئامبار تەكشۈرۈش</span>
</button>
<button class="flex flex-col items-center justify-center p-4 hover:bg-gray-50 rounded-lg">
<i class="fas fa-box-open text-primary text-xl mb-2"></i>
<span class="text-sm">مال ئۇچۇرى</span>
</button>
<button class="flex flex-col items-center justify-center p-4 hover:bg-gray-50 rounded-lg">
<i class="fas fa-users text-primary text-xl mb-2"></i>
<span class="text-sm">خېرىدار ئۇچۇرى</span>
</button>
<button class="flex flex-col items-center justify-center p-4 hover:bg-gray-50 rounded-lg">
<i class="fas fa-receipt text-primary text-xl mb-2"></i>
<span class="text-sm">سېتىش تالونى</span>
</button>
<button class="flex flex-col items-center justify-center p-4 hover:bg-gray-50 rounded-lg">
<i class="fas fa-file-invoice text-primary text-xl mb-2"></i>
<span class="text-sm">كىرگۈزۈش تالونى</span>
</button>
</div>
<!-- Charts Container -->
<div class="mt-8 grid grid-cols-2 gap-6">
<!-- Sales Chart -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h2 class="text-xl font-medium mb-4">تىجارەت ئەھۋالى</h2>
<div id="salesChart" style="width: 100%; height: 400px;"></div>
</div>
<!-- Popular Products Chart -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h2 class="text-xl font-medium mb-4">بازارلىق ماللار</h2>
<div id="productsChart" style="width: 100%; height: 400px;"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script>
// Sales Chart
var salesChartDom = document.getElementById('salesChart');
var salesChart = echarts.init(salesChartDom);
var salesOption = {
animation: false,
tooltip: {
trigger: 'axis'
},
legend: {
data: ['سېتىش', 'كىرگۈزۈش']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1-ئاي', '2-ئاي', '3-ئاي', '4-ئاي', '5-ئاي', '6-ئاي']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'سېتىش',
type: 'line',
data: [120, 132, 101, 134, 90, 230],
smooth: true,
lineStyle: {
color: '#0EA5E9'
},
itemStyle: {
color: '#0EA5E9'
}
},
{
name: 'كىرگۈزۈش',
type: 'line',
data: [220, 182, 191, 234, 290, 330],
smooth: true,
lineStyle: {
color: '#0284C7'
},
itemStyle: {
color: '#0284C7'
}
}
]
};
salesChart.setOption(salesOption);
// Products Chart
var productsChartDom = document.getElementById('productsChart');
var productsChart = echarts.init(productsChartDom);
var productsOption = {
animation: false,
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
right: 10,
top: 'center'
},
series: [
{
name: 'بازارلىق ماللار',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 18,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'كومپيۇتېر' },
{ value: 735, name: 'يانفون' },
{ value: 580, name: 'پرىنتېر' },
{ value: 484, name: 'توركۆرگۈ' },
{ value: 300, name: 'قاتتىق دىسكا' }
]
}
]
};
productsChart.setOption(productsOption);
</script>
</div>
<!-- Recent Activities -->
<div class="mt-8 space-y-8">
<div>
<h2 class="text-xl font-medium mb-4">ئەڭ يېقىنقى سودا ئەھۋالى</h2>
<div class="bg-white rounded-lg shadow-sm">
<div class="p-6">
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-box text-blue-500"></i>
</div>
<div class="mr-4">
<h4 class="font-medium">يېڭى مال كىرگۈزۈلدى</h4>
<p class="text-sm text-gray-500">ئەلى ئابدۇللا تەرىپىدىن</p>
</div>
</div>
<span class="text-sm text-gray-500">5 مىنۇت بۇرۇن</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
<i class="fas fa-check text-green-500"></i>
</div>
<div class="mr-4">
<h4 class="font-medium">سودا تاماملاندى</h4>
<p class="text-sm text-gray-500">مەريەم ئەخمەت تەرىپىدىن</p>
</div>
</div>
<span class="text-sm text-gray-500">15 مىنۇت بۇرۇن</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
<i class="fas fa-truck text-yellow-500"></i>
</div>
<div class="mr-4">
<h4 class="font-medium">مال يوللاندى</h4>
<p class="text-sm text-gray-500">ئايگۈل تۇرسۇن تەرىپىدىن</p>
</div>
</div>
<span class="text-sm text-gray-500">30 مىنۇت بۇرۇن</span>
</div>
</div>
</div>
</div>
</div>
<!-- Stock Reports -->
<div class="flex gap-6">
<!-- Low Stock Items -->
<div class="flex-1">
<h2 class="text-xl font-medium mb-4 pb-2 border-b border-gray-200">ئامباردا ئاز قالغان ماللار</h2>
<div class="bg-white rounded-lg shadow-sm">
<div class="p-6">
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation-triangle text-red-500"></i>
</div>
<div class="mr-4">
<h4 class="font-medium">ThinkPad X1 Carbon</h4>
<p class="text-sm text-gray-500">قالغان سانى: 5 دانە</p>
</div>
</div>
<button class="px-4 py-2 bg-primary text-white rounded-button hover:bg-secondary whitespace-nowrap">
مال تولۇقلاش
</button>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation-triangle text-red-500"></i>
</div>
<div class="mr-4">
<h4 class="font-medium">iPhone 14 Pro</h4>
<p class="text-sm text-gray-500">قالغان سانى: 3 دانە</p>
</div>
</div>
<button class="px-4 py-2 bg-primary text-white rounded-button hover:bg-secondary whitespace-nowrap">
مال تولۇقلاش
</button>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
<i class="fas fa-exclamation-triangle text-red-500"></i>
</div>
<div class="mr-4">
<h4 class="font-medium">HP LaserJet Pro</h4>
<p class="text-sm text-gray-500">قالغان سانى: 2 دانە</p>
</div>
</div>
<button class="px-4 py-2 bg-primary text-white rounded-button hover:bg-secondary whitespace-nowrap">
مال تولۇقلاش
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Overstocked Items -->
<div class="flex-1">
<h2 class="text-xl font-medium mb-4 pb-2 border-b border-gray-200">ئامباردا بېسىلىپ قالغان ماللار</h2>
<div class="bg-white rounded-lg shadow-sm">
<div class="p-6">
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
<i class="fas fa-boxes text-orange-500"></i>
</div>
<div class="mr-4">
<h4 class="font-medium">Dell XPS 15</h4>
<p class="text-sm text-gray-500">قالغان سانى: 150 دانە</p>
</div>
</div>
<button class="px-4 py-2 bg-orange-500 text-white rounded-button hover:bg-orange-600 whitespace-nowrap">
تېزلىتىپ سېتىش
</button>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
<i class="fas fa-boxes text-orange-500"></i>
</div>
<div class="mr-4">
<h4 class="font-medium">Samsung Galaxy S23</h4>
<p class="text-sm text-gray-500">قالغان سانى: 120 دانە</p>
</div>
</div>
<button class="px-4 py-2 bg-orange-500 text-white rounded-button hover:bg-orange-600 whitespace-nowrap">
تېزلىتىپ سېتىش
</button>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
<i class="fas fa-boxes text-orange-500"></i>
</div>
<div class="mr-4">
<h4 class="font-medium">Canon PIXMA</h4>
<p class="text-sm text-gray-500">قالغان سانى: 85 دانە</p>
</div>
</div>
<button class="px-4 py-2 bg-orange-500 text-white rounded-button hover:bg-orange-600 whitespace-nowrap">
تېزلىتىپ سېتىش
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
